Hablamos sobre la forma de personalizar el footer y añadíamos imagen, color y más tarde columnas, hoy vamos a añadir otra imagen pero esta vez será una imagen estática.

La imagen depende mucho de cada uno, de la temática del blog y claro está de la habilidad que tengamos para crear una imagen, en mi caso esa habilidad es... ninguna. Así que lo que hice fue tomar para los ejemplos una imagen prestada.
Podía ser esta imagen como cualquier otra aunque lo ideal es que sea una imagen de poca altura y bastante ancha aunque esto último no es problema porque la podemos centrar otro detalle que hace más atractivo este efecto es que el color de la imagen sea igual o acorde con el color de fondo de nuestro blog.
En plantilla Edición de HML (no es necesario marcar para expandir la plantilla) nos vamos al final para localizar la etiqueta </body> justo antes añadimos lo siguiente:


<div id='footer-fijo'>
<img src='url-imagen' style='position:fixed; bottom:0; right:0;height:42px;width:100%;'/>
</div>

Si deseamos que en nuestra imagen se produzca el efecto deslizante y nos lleve a Inicio en lugar del anterior código añadimos el siguiente.


<div id='footer-fijo'>
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img alt='inicio' border='0' src='url-imagen' style='position:fixed; bottom:0; right:0;'/></a>
</div>


También para el efecto deslizante añadimos ahora el script, justo antes de </head>

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Al guardar los cambios en nuestra plantilla de diseño aparecerá la imagen,unas líneas de código justo antes de ]]></b:skin> solucionará ese problema.

body#layout #footer-fijo {display:none;}


Si deseamos olvidarnos de las imágenes y decidimos probar un color es mucho más rápido, nos situamos también justo antes de </body> y añadimos:


<div id='footer-fijo'>
<span style=' background:#6D993A;position:fixed; bottom:0; right:0;height:42px;width:100%;text-align:center;color: #000; font-family: Arial; font-size: 16px;'>
Aquí el texto </span>
</div>


Podemos modificar
background color de fondo
height alto
width ancho
color color de fuente
font-family tipo de fuente
font-size tamaño de fuente






Jazziturno

¡Qué ganas tenía de saber ésto!

Gracias Gema, como no :)

Un abrazo

Responder
Unknown

Gema y para que se quede abajo pero no estatica? me refiero al final de todo pero que se mueva según mueves el scroll es que sino además de taparte una parte que tengo abajo con texto y links se ve siempre incluso cuando estoy al principio de la página.

Responder
Gem@

yz Me alegra que te guste Jazziturno ¿por qué no lo habías preguntado? ¿no sabes que preguntando se llega a Roma? :)

yz MALINA es así como dices, normalmente quien añade este efecto lo que hace es añadir información porque de esta forma siempre está visible.
Mira estos enlaces:
Usos para el footer

Imagen y color en el footer (esto es lo que buscas creo)

Columnas en el footer
Si no vieras lo que buscas házmelo saber ;)

Responder
Unknown

mi niña creo que no te dije de la cabecera y más cambios en tu plantilla...está bellísimo :)
Esas imágenes que simulan olitas o nubes me encantan...pero no lo sé hacer, tampoco intento no tengo el tiempo necesario...besitos!!!

Responder
Gem@

yz Gracias Graciela, es una imagen difuminada de un teclado, las nubes deben ser el difuminado y las olas las teclas pero es lo mismo.
Me alegra que te guste ;)

Responder
Marga

Ayyy Gema que chulo !!!!!!!
Pero para los novatos como yo, no habrá alguna página dónde ya encontremos imágenes hechas???
Pido demasiado, a que si jejeje.

Besos
Marga

Responder
Gem@

yz Marga no sabría decirte de páginas con este estilo de imágenes, de saberlo ten por seguro que habría puesto un enlace en la entrada :(

Responder
Unknown

sera que hay algun script que haga que varias imagenes se muevan horizontalmente, algo asi como nubes?, me gustaria animar un poco el footer.

Responder
Gem@

yz Miguel cualquier script lo puedes añadir en el footer, utilizando un gadget de HTML como si se tratara de la sidebar ;)

Responder
Unknown

Gracias Gemita, lo mirare...

Responder
Unknown

Hola Gema...muy bueno tu post, pero en realidad tengo una pregunta...en los blogs q aparesco no se actulizan mis entradas y aparece una muy antigua y en realiada hasta ahorita no encuentro el porblema no sé si tú me podrias ayudar....gracias

Responder
Gildo Kaldorana

Muchas gracias Gem@.
Yo, lo he añadido como widget en la sidebar y funciona igual. Asi no hay que andar con el html de la plantilla.
Salud y suerte.

Responder
Manuel

Hola Gema, necesito tu ayuda. Aunque siempre activo la opción de centrado cuando subo las imágenes, tanto estas como el texto de las entradas de mi blog quedan ligeramante desplazadas a la derecha, es decir no mantienen la misma separación con el borde de las dos sidebar. Si intento insertar una imagen más grande entonces ésta se amplia a la derecha pegandose a la sidebar de ese lado.
¿Que podría hacer para que siempre quede centrada? En edicion html he intentado cambiar algo en el "post img" pero no consigo nada. Gracias. Saludos.
http://rutasyfotos.blogspot.com

Responder
Gem@

yz KaRiTa comprueba en el editor de entradas en la parte de abajo donde dice " Opciones de entrada" que está marcado "Automático" ;)

yz Gildo Kaldorana es una buena alternativa, todo lo que funcione y pueda añadirse sin modificar la plantilla nos evita posibles errores ;)

yz Manuel post img añade estilos a la imagen que añadimos al post pero no la ubica, eso lo hacemos en el editor de entradas o con HTML.
Lo que hay que modificar es donde dice ".post {
"
Prueba a eliminar el padding que tienes y añádelo así:
padding: 25px 25px 25px 20px;
Ten en cuenta que siguiendo el orden de izquierda a derecha modificamos arriba, derecha, debajo, izquierda ;)

Responder
Manuel
Este comentario ha sido eliminado por el autor.
Responder
Manuel

Gracias Gem@. Lo he conseguido con tu consejo. El texto de desalineó un poco pero fue culpa mia y lo he corregido, así que he eliminado el post donde te pregunta sobre ello. Es que estoy intentando ensanchar el blog y poco a poco lo voy consiguiendo. Ahora no quisiera perder unas esquinas y unos railes decorativos que tiene el main (igual que las sidebar). He visto en el HTML que son archivos gifs alojados en blogger.
Lo he copiado y con un editor gráfico los he redimensionado para que pasen de 485 pixel de ancho a 748 pero me sale una franja negra de un extremo a otro ocultando el verdadero color del main, y el fondo se supone que es transparente y así lo veo en el editor. Un poco complicado, espero haberme explicado. Muchas gracias.

Responder
Gem@

yz Manuel por mucho que quiera imaginarme esa franja negra no sé lo que es :(
Si me pasas la url de tu blog lo miro ;)

Responder
Manuel

Parece que el problema estaba donde tenía alojados los gif que algo les cambiaba cuando los subía y aparecían con un fondo negro. Gracias por tu paciencia.
http://rutasyfotos.blogspot.com

Responder
Gem@

yz Pero ya está bien ¿no? al menos yo no veo esa franja negra. Puedes ser eso que comentas y también las imágenes de las esquinas.
De cualquier modo lo veo perfecto ahora con Firefox y con Explorer :)

Responder
anrafera

Gracias Gem@ por tu buen hacer. Saludos.

Responder
Gem@

yz Gracias a ti por comentar anrafera :)

Responder
Unknown

hola gem@: quiero que la imagen en el footer ocupe solo el ancho de las sidebar + el main wraper. ¿qué debo hacer?

Responder
Gem@

:: La solución es que la imagen tenga el mismo ancho que ese espacio lk.

Responder
Allan Fixnet Uster

Amada Gem@ uno salutto de tua fã Taillard
Te amooooo!!!
Salvou a minha patria rainha!!!
Ich liebe dich!

Responder
Juan Martínez

Hola Gemma.
Me parece interesante la idea, pero no he podido quitar la imagen de la plantilla de diseño. Quizás no funcione con las nuevas plantillas de blogger.
Saludos y tu blog es genial y muy útil.

Responder
Unknown

Hola Gem@ he puesto la imagen pero sale en la derecha del blog
mi blog es http://aspecomparsaestudiantes.blogspot.com.es
gracias

Gem@

¿De qué imagen se trata? lo digo porque yo la veo centrada por si no hablamos de la misma imagen.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top